<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
  <title>9-1-vue-router</title>
</head>
<body>
<div id='app'>
  <ul>
    <li><router-link to='/page1'>page1</router-link></li>
    <li><router-link to='/page2'>page2</router-link></li>
  </ul>
  <router-view></router-view>
</div>
<script src='../lib/vue.global.js'></script>
<script src='../lib/vue-router.global.js'></script>
<script>
  const {createApp} = Vue
  const {createRouter, createWebHashHistory} = VueRouter

  const Page1 = {
    template: `<div>Page 1</div>`
  }

  const Page2 = {
    template: `<div>Page 2</div>`
  }

  const router = createRouter({
    history: createWebHashHistory(),
    routes: [
      {path: '/', component: Page1},
      {path: '/page1', component: Page1},
      {path: '/page2', component: Page2}
    ]
  })

  const app = createApp({})
  app.use(router)
  app.mount('#app')

</script>
</body>
</html>
